<template>
  <view class="repaymentRecord">
    <nav-back title="还款记录"></nav-back>
    <scroll-view scroll-y class="table" @scrolltolower="onLoadMore">
      <view class="tr">
        <view class="th">时间</view>
        <view class="th">金额</view>
        <view class="th">状态</view>
      </view>
      <view class="tr bg-white" :class="{ fail: item.status === 1 }" v-for="(item, index) in list" :key="index">
        <view class="td">{{ item.time | dateFormat("YYYY.MM.DD") }}</view>
        <view class="td flex align-center justify-center" v-if="item.type === 1">
          {{ item.cost }}
          <ly-avatar size="32rpx" :src="IMAGES.ICON_MONEY_FLOWER"></ly-avatar>
        </view>
        <view class="td" v-else>{{ item.cost }}元</view>
        <view class="td">
          <view v-if="item.status === 1">失败</view>
          <view v-if="item.status === 2">成功</view>
        </view>
      </view>
    </scroll-view>
    <view class="footer"><text>只显示最近10条记录</text></view>
  </view>
</template>

<script>
import { IMAGES } from "@/config/resources";
import navBack from "@/components/navBack";
import credit from "@/api/modules/credit";
import LyAvatar from "@/lyui/ly-avatar/avatar";
export default {
  components: {
    navBack,
    LyAvatar
  },
  computed: {
    IMAGES: () => IMAGES
  },
  data() {
    return {
      list: []
    };
  },
  onLoad() {
    credit.repaymentRecord().then(_ => {
      this.list = _.data.data;
    });
  }
};
</script>

<style lang="scss">
.repaymentRecord {
  width: 750rpx;
  height: 100%;
}

.td,
.th {
  width: 250rpx;
}

.table {
  width: 750rpx;
  margin: 0 auto;
  font-size: 24upx;
  .tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20upx 0;
    text-align: center;
    &.fail {
      color: #fb7299;
    }
    .td {
      text-align: center;
    }
    &.bg-white {
      margin-bottom: 1rpx;
    }
  }
}
.footer{
  text-align: center;
  color: #08c;
  line-height: 80rpx;
}
</style>
